<template>
   <div class="root">
      <div class="mbase">
        <image :src="info.cover" class="mlogo"/>
        <div class="card">
          <div class="name">{{info.name}}
            <div class="type">{{info.type}}</div>
          </div>
          <div class="totem-container">
            <image :src="info.totem" class="totem"/>
          </div>
          <div class="clear-fix"></div>
          <div class="info-text">
            <p class="info-start">简介</p>
            {{info.desc}}
          </div>
        </div>
    </div>
    <!-- end head info -->
      <!-- 特征 -->
    <mfeature :baseInfo="info.baseInfo"/>
    <div class="margin-top-8">
      <tabs :id="id"/>
    </div>
  </div>
</template>

<script>
import {get} from '@/util'
import hurtTable from '@/components/monster/desc/HurtTable'
import mfeature from '@/components/monster/desc/Mfeature'
import mtrap from '@/components/monster/desc/Mtrap'
import mspStatus from '@/components/monster/desc/MspStatus'
import mgain from '@/components/monster/desc/Mgain'
import tabs from '@/components/monster/desc/Tabs'
import simTable from '@/components/SimTable'
export default {
  data () {
    return {
      id: null,
      title: '',
      info: {},
      headers: [1, 2, 3],
      data: [[4, [32, 12], 6], [32, 1, 32]]
    }
  },
  components: {
    hurtTable,
    mfeature,
    mtrap,
    mspStatus,
    mgain,
    tabs,
    simTable
  },
  onLoad: function (options) {
    // 设置导航条
    wx.setNavigationBarTitle({
      title: options.name
    })
    // 大图
    this.id = options.id
  },
  methods: {
    async getInfo (mid) {
      wx.showNavigationBarLoading()
      const infoData = await get('/weapp/mdesc', {id: mid})
      this.info = infoData
      wx.hideNavigationBarLoading()
    }
  },
  mounted () {
    this.getInfo(this.id)
  }

}
</script>

<style scoped>
.mlogo {
  height: 180px;
  width: 100%;
}
.mbase {
  background-color: #ffffff;
}
.name {
  box-sizing: border-box;
  width: 60%;
  color: #212121;
  font-size: 20px;
  font-weight: 700;
  float: left;
}
.type {
  color: #757575;
  font-size: 14px;
}
.totem {
  width: 60px;
  border-radius: 50%;
  height: 60px;
}
.totem-container {
  width: 40%;
  box-sizing: border-box;
  text-align: center;
  float: left;
}
.info-start {
  color: #212121;
  font-size: 16px;
  margin-bottom: 5px;
}
.info-text {
  font-size: 14px;
  color: #757575;
}





.hurt-data {
  padding: 15px;
  margin-top: 8px;
}
.hurt-head {
  color: #212121;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.tips {
  color: #757575;
  font-size: 12px;
  margin-bottom: 10px;
}
.tips span {
  color: #212121;
}
.tips .icon {
  color: #ffb400;
}

/* table */
.table{
  display: table;
  box-sizing: border-box;
  border-top:1px solid #cccccc;
  border-left:1px solid #cccccc;
  width: 100%;
}
.tr{
  width: 100%;
}
.td,.th{
  display: table-cell;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 100%;
  vertical-align: middle;
}
.th{
  font-weight: 700;
}
.col-3{
  width:33.3333%;
}
.col-5{
  width: 55.5555%;
}

.col-1{
  width: 11.1111%;
}
</style>
